<template>
    <WareHouseView>
        <div class="carda">
            <div class="card-body">
                <table class="table table-centered">
                    <thead>
                        <tr>
                            <th scope="col">产品编号</th>
                            <th scope="col">商品名称</th>
                            <th scope="col">商品图片</th>
                            <th scope="col">入库时间</th>
                            <th scope="col">入库方式</th>
                            <th scope="col">入库理由</th>
                        </tr>
                    </thead>
                    <tbody v-for="income_produce in income_produces" :key="income_produce.id">
                        <tr>
                            <th scope="row">{{ income_produce.id }}</th>
                            <td>{{ income_produce.title }}</td>
                            <td><img :src="income_produce.photo" width="50px" alt=""></td>
                            <td>{{ income_produce.inbound_time }}</td>
                            <td>{{ income_produce.inbound_way }}</td>
                            <td>{{ income_produce.describe }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </WareHouseView>
</template>

<script>
import WareHouseView from '@/components/WareHouseView.vue';
import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery';
import dayjs from 'dayjs';

export default {
    name: "IncomeManageView",
    components: {
        WareHouseView,
    },
    setup() {
        const store = useStore();
        const income_produces = ref([]);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/inbound_goods/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                income_produces.value = resp;
                console.log("这是第一个GET函数");
                console.log(income_produces.value);
            }
        })
        const ws = new WebSocket('ws://47.121.28.202:8000/ws/buyinginformation/');
        ws.onopen = () => {
        }
        ws.onmessage = (e) => {
            const message = JSON.parse(e.data); 
            const exists = income_produces.value.some(item => item.return_id === message.return_id);
            const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
            if (!exists) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/inbound_goods/",
                    type: "POST",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        inbound_way: message.inbound_way,
                        title: message.title,
                        inbound_time: currentTime,
                        describe: message.describe,
                        photo: message.photo,
                        return_id: message.return_id,
                    },
                    success() {
                        console.log("执行了POST函数");
                        console.log(message.return_id);
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/inbound_goods/",
                            type: "GET",
                            headers: {
                                'Authorization': "Bearer " + store.state.user.access,
                            },
                            success(resp) {
                                for(let i of resp) {
                                    let is_have = false;
                                    for (let j of income_produces.value) {
                                        if (i.return_id === j.return_id) {
                                            is_have = true;
                                            break;
                                        }
                                    }
                                    if (is_have === false) {
                                        income_produces.value.push(i);
                                    }
                                }
                            }
                        })
                    }
                })
            }
        }

        return {
            income_produces
        }
    }
}
</script>

<style>
.table-centered th,  
.table-centered td {  
    vertical-align: middle; 
    text-align: center;
}
</style>